<template>

<!-- 事件捕获 触发事件加(.capture)点button先'dodo',再'noclick'-->
<!-- <div v-on:click.capture="dodo" class="aaa">
    <button v-on:click="doThis">阻止单击事件继续传播</button>
  </div> -->

<!-- 事件冒泡 触发事件(默认)点button先'noclick',再'dodo'-->
  <div v-on:click="dodo" class="aaa">
    <button v-on:click="doThis">阻止单击事件继续传播</button>
  </div>

<!-- 停止事件继续传播,触发事件加(.stop)-->
<!-- <div v-on:click="dodo" class="aaa">
    <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
  </div> -->
</template>

<script>
export default {
  methods: {
    doThis: function () {
      alert("noclick");
    },
    dodo: function () {
      alert("dodo");
    },
  },
};
</script>

<style lang="less" scoped>
.aaa {
  width: 150px;
  height: 200px;
  background-color: rgb(212, 62, 62);
}
</style>>
